Node.js Linting & Formatting

Node.js

সূচক গুণমান

ধারাবাহিক কোডিং গুণমান এবং শৈলী Node.js প্রকল্পের জন্য গুরুত্বপূর্ণ, বিশেষ করে দলের পরিবেশে।

এটি সাহায্য করে:

কোডের পঠনযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা

কোড পড়া এবং বজায় রাখা সহজ করে তোলে

প্রাথমিক ত্রুটি সনাক্তকরণ এবং প্রতিরোধ

প্রাথমিকভাবে ত্রুটি সনাক্ত করে এবং প্রতিরোধ করে

বোর্ড জুড়ে স্ট্যান্ডার্ড কোডিং শৈলী

দলের প্রত্যেকের জন্য একটি ধারাবাহিক কোডিং শৈলী নিশ্চিত করে

স্বয়ংক্রিয় কোড পর্যালোচনা

স্বয়ংক্রিয় কোড পর্যালোচনা

উন্নত বিকাশকারী অভিজ্ঞতা

বিকাশকারীদের কাজের অভিজ্ঞতা উন্নত করে

💡দ্রষ্টব্য:

এই নির্দেশিকাটি জাভাস্ক্রিপ্ট এবং টাইপস্ক্রিপ্ট উভয় সরঞ্জামকে কভার করে কারণ তারা একই ধরনের ঋণদান এবং ফর্ম্যাটিং পরিবেশ ভাগ করে নেয়।

ESLint: JavaScript/TypeScript Linting

ESLint হল একটি খুব জনপ্রিয় JavaScript/TypeScript linting টুল যা আপনাকে আপনার কোডে পাওয়া প্যাটার্ন সনাক্ত করতে এবং রিপোর্ট করতে সাহায্য করে। এটি অত্যন্ত কনফিগারযোগ্য এবং সমর্থন করে:

ইনস্টলেশন

npm install --save-dev eslint

ব্যাপক ESLint ফ্রেমওয়ার্ক

TypeScript সমর্থন সহ Node.js প্রকল্পের জন্য এখানে আরও সম্পূর্ণ .eslintrc.json কনফিগারেশন রয়েছে:

{
  "env": {
    "node": true,
    "es2021": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "indent": ["error", 2],
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}

উন্নত ESLint অ্যাপ্লিকেশন

মৌলিক লিন্টিং ছাড়াও, ESLint কোডের গুণমান বজায় রাখতে শক্তিশালী বৈশিষ্ট্য সরবরাহ করে:

সাধারণ আদেশ

# Lint all JavaScript/TypeScript files
npx eslint .

# Fix auto-fixable issues
npx eslint --fix .

# Lint specific file
npx eslint src/index.js

সুন্দর: কোড ফরম্যাটার

Prettier হল একটি ধারণাগত কোড ফর্ম্যাটার যা আপনার কোড পার্স করে এবং এটির নিজস্ব নিয়মের সাথে পুনরায় মুদ্রণ করে একটি সামঞ্জস্যপূর্ণ শৈলী প্রয়োগ করে৷ এটি সমর্থন করে:

💡পরামর্শ:

সম্ভাব্য ত্রুটিগুলি ধরতে এবং কোড প্যাটার্নগুলি প্রয়োগ করতে বিন্যাসনের জন্য Prettier এবং ESLint ব্যবহার করুন৷

ইনস্টলেশন

npm install --save-dev --save-exact prettier

বিস্তারিত সুন্দর স্থাপত্য

এখানে সাধারণ বিকল্পগুলির সাথে একটি ভালভাবে নথিভুক্ত .prettierrc কনফিগারেশন রয়েছে:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

উন্নত সুন্দর অ্যাপ্লিকেশন

সুন্দর কাস্টমাইজ করা যায় এবং আপনার ওয়ার্কফ্লোতে একত্রিত করা যায় বিভিন্ন উপায়ে:

সাধারণ আদেশ

# Format all files
npx prettier --write .

# Check formatting without making changes
npx prettier --check .

# Format specific file
npx prettier --write src/index.js

ঝামেলা-মুক্ত ESLint + সুন্দর ইন্টিগ্রেশন

ESLint এবং Prettier এর মধ্যে দ্বন্দ্ব এড়াতে, সঠিক ইন্টিগ্রেশন সেট করুন:

⚠️গুরুত্বপূর্ণ:

নিয়ম দ্বন্দ্ব এড়াতে সর্বদা এই প্যাকেজগুলি ইনস্টল এবং কনফিগার করুন:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

তারপর আপনার ESLint কনফিগারেশন আপডেট করুন:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

অ্যাডভান্সড এডিটর ইন্টিগ্রেশন

🚀পেশাগত পরামর্শ:

সর্বাধিক উত্পাদনশীলতার জন্য সংরক্ষণ করার সময় আপনার সম্পাদককে স্বয়ংক্রিয়ভাবে সংশোধন এবং কোড ফর্ম্যাট করতে সেট করুন।

ভিএস কোড: চূড়ান্ত সিস্টেম

ভিএস কোডে সেরা উন্নয়ন অভিজ্ঞতার জন্য, এই পদক্ষেপগুলি অনুসরণ করুন:

নিম্নলিখিত এক্সটেনশন ইনস্টল করুন:

আপনার VS কোড settings.json কনফিগার করুন:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.requireConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

অন্যান্য সম্পাদক সেটিংস

এখানে অন্যান্য জনপ্রিয় সম্পাদকদের জন্য সেটআপ নির্দেশাবলী রয়েছে:

হাস্কি এবং লিন্ট-মঞ্চের সাথে গিট হুকস

প্রি-কমিট হুক সেট আপ করে খারাপ কোডকে প্রতিশ্রুতিবদ্ধ হওয়া থেকে আটকান যা স্বয়ংক্রিয়ভাবে ফর্ম্যাট করে এবং কমিট করার আগে আপনার কোড কমিট করে:

🔒কেন প্রি-কমিট হুক ব্যবহার করবেন?

কোড প্রতিশ্রুতিবদ্ধ হওয়ার আগে তারা স্বয়ংক্রিয়ভাবে শৈলী সমস্যাগুলি সমাধান করে আপনার দল জুড়ে ধারাবাহিক কোডের গুণমান নিশ্চিত করে।

কমিট করার আগে কোডের গুণমান নিশ্চিত করতে প্রি-কমিট হুক সেট করুন:

ইনস্টলেশন

npm install --save-dev husky lint-staged

কনফিগারেশন (package.json)

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml}": [
      "prettier --write"
    ]
  }
}

উন্নত সেরা অনুশীলন

1. মনোরেপো কাঠামো

মনোরেপো ফ্রেমওয়ার্ক ব্যবহার করে প্রকল্পগুলির জন্য:

// In your root package.json
{
  "workspaces": ["packages/*"],
  "scripts": {
    "lint": "yarn workspaces run lint",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.0.0",
    "prettier": "^2.5.0",
    "typescript": "^4.5.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

2. কর্মক্ষমতা অপ্টিমাইজেশান

বড় প্রকল্পের জন্য, ESLint কর্মক্ষমতা অপ্টিমাইজ করুন:

// .eslintrc.js
module.exports = {
  cache: true, // Enable caching
  cacheLocation: '.eslintcache', // Cache file location
  ignorePatterns: ['**/node_modules/**', '**/dist/**'], // Ignore patterns
  parserOptions: {
    project: './tsconfig.json', // Only for TypeScript
    projectFolderIgnoreList: ['**/node_modules/**']
  }
};

3. ক্রস-এডিটর সামঞ্জস্যের জন্য EditorConfig

একটি .editorconfig ফাইল যোগ করুন বিভিন্ন এডিটর এবং আইডিই জুড়ে ধারাবাহিক কোডিং শৈলী বজায় রাখতে:

# EditorConfig is awesome: https://EditorConfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{json,yml}]
indent_style = space
indent_size = 2

[*.{cmd,sh}]
indent_style = tab

4. CI/CD ইন্টিগ্রেশন

আপনার CI/CD পাইপলাইনে লিন্টিং এবং ফরম্যাটিং পরীক্ষা যোগ করুন:

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run lint
      - run: npm run format:check

লিন্ডিং সেরা অভ্যাস

মৌলিক কাঠামো দিয়ে শুরু করুন(যেমন এসলিন্ট:প্রস্তাবিত) এবং প্রয়োজন অনুসারে প্রসারিত করুন
নিয়মের তীব্রতার মাত্রার সাথে সামঞ্জস্যপূর্ণ থাকুন (error, warn, off)
প্রয়োজনে মন্তব্য সহ নথি নিয়ম ব্যতিক্রম
আপনার ESLint এবং প্লাগইন সংস্করণ নিয়মিত আপডেট করুন
TypeScript-এর সাথে কাজ করার সময় TypeScript-নির্দিষ্ট নিয়ম ব্যবহার করুন

ফরম্যাটিং সেরা অনুশীলন

লাইনের দৈর্ঘ্য যুক্তিসঙ্গত রাখুন(80-120 অক্ষর)
আদর্শ উদ্ধৃতি শৈলী ব্যবহার করুন(একক বা ডবল উদ্ধৃতি)
সেমিকোলন ব্যবহারে ধারাবাহিক থাকুন
পরিষ্কার বিচ্ছেদের জন্য অবজেক্ট এবং অ্যারের মধ্যে ট্রেলিং কমা ব্যবহার করুন
সংরক্ষণ করার সময় আপনার সম্পাদককে বিন্যাসে কনফিগার করুন

গ্রুপ ওয়ার্কফ্লো

গ্রুপে ESLint এবং Prettier ফ্রেমওয়ার্ক শেয়ার করুন
CI/CD পাইপলাইনে লিন্টিং এবং ফরম্যাটিং যোগ করুন
তাড়াতাড়ি সমস্যা ধরতে প্রি-কমিট হুক ব্যবহার করুন
আপনার কোড শৈলী সিদ্ধান্ত নথিভুক্ত
নিয়মিতভাবে আপনার কোড শৈলী নির্দেশিকা পর্যালোচনা এবং আপডেট করুন

অনুশীলন করুন

সঠিক টুলের নাম টেনে আনুন।

🔤 ______JavaScript এবং Node.js-এর জন্য একটি জনপ্রিয় ঋণদান টুল।

Prettier
✗ ভুল! Prettier হল একটি কোড ফরম্যাটার, ধার দেওয়ার টুল নয়
ESLint
✓ ঠিক আছে! জাভাস্ক্রিপ্ট এবং Node.js-এর জন্য ESLint একটি খুব জনপ্রিয় linting টুল
TypeScript
✗ ভুল! টাইপস্ক্রিপ্ট একটি প্রোগ্রামিং ভাষা, একটি লিন্টিং টুল নয়
Husky
✗ ভুল! Husky Git একটি হুক ম্যানেজমেন্ট টুল, একটি ধারের টুল নয়